<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="/static/h-ui/css/H-ui.min.css" />
    <link rel="stylesheet" type="text/css" href="/static/h-ui/css/H-ui.admin.css" />
    <link rel="stylesheet" type="text/css" href="/static/h-ui/lib/Hui-iconfont/1.0.8/iconfont.css" />

    <script type="text/javascript" src="/static/h-ui/lib/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="/static/h-ui/lib/layer/2.4/layer.js"></script>
    <script type="text/javascript" src="/static/h-ui/js/H-ui.js"></script>
    <script type="text/javascript" src="/static/h-ui/js/H-ui.admin.page.js"></script>
</head>

<body>
    <div class="cl pd-5 bg-1 bk-gray">
        <a href="javascript:void(0);" class="btn btn-primary radius sethumb">
            <i class="Hui-iconfont">&#xe600;</i> 站内选择 </a>&nbsp;&nbsp;
        <a href="javascript:void(0);" class="btn btn-default radius sethumb">
            <i class="Hui-iconfont">&#xe600;</i> 本地上传 </a>&nbsp;&nbsp;
        <a href="javascript:void(0);" class="btn btn-default radius sethumb">
            <i class="Hui-iconfont">&#xe600;</i> 网络图片 </a>&nbsp;&nbsp;
    </div>
    <!-- 选择缩略图 -->
    <div class="step0 active" style="display:block;">
        <table class="table table-border table-bordered table-bg">
            <thead>
                <tr class="text-c">
                    <th width="50%" background="/static/images/linebg.gif">
                        <strong>文件名</strong>
                    </th>
                    <th width="10%" background="/static/images/linebg.gif">
                        <strong>文件大小</strong>
                    </th>
                    <th width="32%" background="/static/images/linebg.gif">
                        <strong>最后修改时间</strong>
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr class="text-c" bgcolor='#FFFFFF' height='26' onMouseMove="javascript:this.bgColor='#FCFDEE';" onMouseOut="javascript:this.bgColor='#FFFFFF';">
                    <td>
                        <a href="addThumb?activepath={$activeurl}&step=1">
                            <img src=/static/images/dir2.gif border=0 width=16 height=16 align=absmiddle> 上级目录</a>
                        &nbsp;&nbsp;&nbsp;&nbsp;当前目录:
                        <span style="color:#f00;"> {$activepath} </span>
                    </td>
                    <td></td>
                    <td></td>
                </tr>
                {foreach $dirs as $dir}
                <tr class="text-c" style="height:26px; " onMouseMove="javascript:this.bgColor='#FCFDEE';" onMouseOut="javascript:this.bgColor='#FFFFFF';">
                    <td style="text-align:left;">
                        <a href="addThumb?activepath={$activepath}/{$dir}&step=1">
                            <img src=/static/images/dir.gif border=0 width=16 height=16 align=absmiddle>{$dir}
                        </a>
                    </td>
                    <td></td>
                    <td></td>
                </tr>
                {/foreach} {foreach $files as $file}
                <tr class="text-c" bgcolor='#FFFFFF' height='26px' onMouseMove="javascript:this.bgColor='#FCFDEE';" onMouseOut="javascript:this.bgColor='#FFFFFF';">
                    <td style="text-align:left;">
                        <a href="javascript:void(0);" onClick="preview('{$activepath}/{$file[\'name\']}')" title="点击查看">
                            <img src="/static/images/{$file['extension']}.gif" border=0 width=16px height=16px align=absmiddle>{$file['name']}</a>
                    </td>
                    </td>
                    <td align='center'> {$file['size']} </td>
                    <td align='center'> {$file['time']}&nbsp;&nbsp;
                        <a href='javascript:void(0);' onclick="preview('{$activepath}/{$file[\'name\']}')"
                            class="btn">预览</a>
                    </td>
                </tr>
                {/foreach}
            </tbody>
        </table>
        <div id="showdiv" style="width:400px;height:300px;position:absolute;top:20%; left:20%;background:#fcfdfd;box-shadow:1px 8px 10px 1px #9b9b9b;border-radius:1px;  z-index:999;display:none; ">
            <input type="hidden" name="pImgname" id="pImgname" value="">
            <div class="tiptop" style="background-color:#5A98DE;text-align:center;height:36px">
                <span style="color:#fff">图片预览</span>
                <a onClick="$('#showdiv').css('display','none')" style="display:block; background:url(/static/images/close.png) no-repeat; width:22px; height:22px;float:right;margin-right:7px; margin-top:10px; cursor:pointer;"></a>
            </div>
            <div class="tipimg" style="width:300px;height:190px;margin-left:40px;margin-top:20px;">
                <img id="showimg" src="" width="300" height="200px">
            </div>
            <div class="tipbtn" style="float:right;margin-top:10px;;margin-right:30px;">
                <input name="" type="button" class="btn btn-primary radius" value="选定" onClick="selectImg()" />&nbsp;
                <input name="" type="button" class="btn btn-default radius" value="取消" onClick="$('#showdiv').css('display','none')" />
            </div>
        </div>
    </div>
    <!-- 选择缩略图end -->
    <!-- 本地上传 -->
    <div class="step1 active" style="display:none;">
        <form id="submit_form" method="post" action="" enctype="multipart/form-data">
            <input type="hidden" name="isthumb" id="isthumb" value="1">
            <div class="row cl" style="margin-top:80px;margin-left:30px;">
                <label class="form-label col-xs-2 col-sm-1">
                    <span class="c-red">*</span>本地上传：</label>
                <div class="formControls col-xs-6 col-sm-2">
                    <input type="file" class="input-text" name="upload_file" id="upload_file">
                </div>
                <!-- <input type="text" name="test_text" id="test_text" value="test"> -->
                <div class="col-3"> </div>
            </div>
            <div class="row cl" style="margin-top:30px;margin-left:30px;">
                <div class="col-xs-6 col-sm-5 col-xs-offset-2 col-sm-offset-2">
                    <input class="btn btn-primary radius" type="button" value="&nbsp;确&nbsp;定&nbsp;" onCLick="uploadThumb()">
                    <input class="btn btn-default radius" type="button" value="&nbsp;取&nbsp;消&nbsp;" onClick="layer_close();">
                </div>
            </div>
        </form>
    </div>
    <!-- 本地上传end -->
    <!-- 网络图片-->
    <div class="step2 active" style="display:none;">
        <div class="row cl" style="margin-top:80px;margin-left:30px;">
            <label class="form-label col-xs-2 col-sm-1">
                <span class="c-red">*</span>图片地址：</label>
            <div class="formControls col-xs-6 col-sm-2">
                <input type="text" class="input-text" name="onlineImg" id="onlineImg" value="" placeholder="将图片地址黏贴至此">
            </div>
            <span class="ospan c-red"></span>
            <div class="col-3"> </div>
        </div>
        <div class="row cl" style="margin-top:30px;margin-left:30px;">
            <div class="col-xs-6 col-sm-5 col-xs-offset-2 col-sm-offset-2">
                <input class="btn btn-primary radius" type="button" value="&nbsp;确&nbsp;定&nbsp;" onCLick="oSelectImg()">
                <input class="btn btn-default radius" type="button" value="&nbsp;取&nbsp;消&nbsp;" onClick="layer_close();">
            </div>
        </div>
    </div>
    <!-- 网络图片end-->

<script type="text/javascript" src="/static/js/jquery/jquery.form.js"></script>
<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript">
    //点击选择
    $('.sethumb').each(function (x) {
        $(this).click(function () {
            $('.sethumb').attr('class', 'btn btn-default radius sethumb');
            $(this).attr('class', 'btn btn-primary radius sethumb');
            $('.active').css('display', 'none');
            $('.step' + x).css('display', 'block');
        });
    });

    //step0 站内选择
    function preview(imageName) {
        url = '/' + imageName;
        $("#showdiv").css('display', 'block');
        // $("#pImgname").val(imageName);
        $("#showimg").attr('src', url);
    }

    function selectImg() {
        // var imageName=$("#pImgname").val();
        var imageUrl = $("#showimg").attr('src');
        window.parent.$("#showthumb").attr('src',imageUrl);
        window.parent.$("#thumb").val(imageUrl);
        layer_close();
    }

    //step1本地上传图片
    function uploadThumb() {
        if ($("#upload_file").val() == '') {
            layer.msg("请选择要上传的文件", {
                icon: 6,
                time: 1000
            });
            return false;
        } else {
            var formData = new FormData($("#submit_form")[0]);
            //ajax上传
            $.ajax({
                url: '{:url("/file_manager/uploadthumb")}',
                type: 'POST',
                async: true,
                cache: false,
                data: formData,
                processData: false,
                contentType: false,
                dataType: "json",
                beforeSend: function () {
                    uploading = true;
                },
                success: function (data) {
                    if (data.status == 1) {
                        // console.log(data.imgname);
          
                        window.parent.$("#showthumb").attr('src','/' + data.imgname);
                        window.parent.$("#thumb").val('/' + data.imgname);
                        layer_close();
                    } else {
                        layer.msg(data.msg);
                        return false;
                    }
                    uploading = false;
                }
            });
        }
    }

    //step2网络图片
    function oSelectImg() {
        var onlineImg = $("#onlineImg").val();
        if (onlineImg == '') {
            layer.msg('图片地址为空', {
                icon: 5,
                time: 1000
            });
            return false;
        }
        $test = $.post('is_img', {
            'filename': onlineImg
        }, function (data) {
            console.log(data);
            if (data.status == 1) {
                // $(".ospan").html('');
                // return true
                window.parent.$("#showthumb").attr('src', onlineImg);
                window.parent.$("#thumb").val(onlineImg);
                layer_close();
            } else {
                $(".ospan").html(data.msg);
                return false;
            }
        }, 'json');
    }
</script>
<!--请在上方写此页面业务相关的脚本-->
  
</body>

</html>